<template>
  <div>
    <div class="login-header">
      <van-icon
        class="login-imgesone"
        @click="$router.push('/home')"
        name="arrow-left"
      />
      <span class="login-headerspan" @click="$router.push('/user')">登录</span>
    </div>
    <form action="">
      <div class="login-formheader">
        <input
          type="username"
          name=""
          id="inputone"
          @focus="focususer"
          @blur="blurone"
          v-model="username"
          placeholder="用户名/邮箱/已验证手机"
        />

        <van-icon v-show="errorone" @click="chaItem" class="cha" name="cross" />
      </div>

      <div class="login-formheader">
        <input
          type="password"
          v-model="password"
          name=""
          id="inputeyes"
          @blur="blurtwo"
          @focus="focuspassword"
          placeholder="请输入密码"
        />

        <van-icon v-show="errortwo" @click="chaItem" class="chatwo" name="cross" />

        <van-icon
          @click="showeyesone(flag)"
          v-show="flag"
          class="logineyesclose"
          name="closed-eye"
        />
        <van-icon
          @click="showeyesone(!flag)"
          v-show="!flag"
          class="logineyesclose"
          name="eye-o"
        />
        <span class="loginforget">忘记密码</span>
      </div>
    </form>
    <div class="loginafter">
      <button @click="loginItem">登 录</button>
      <div
        class="loginquick"
        @click="$router.push({ path: '/register' })"
      >
        <span @click="$router.push('/register')">快速注册</span>
      </div>
      <div class="loginother">
        <van-icon class="loginotherone" name="minus" /><span>其他登录方式</span
        ><van-icon class="loginotherone" name="minus" />
      </div>
    </div>
    <div class="loginfal">
      <div class="loginqq">
        <van-icon class="flao" name="chat-o" size="40" />
        <p class="flao">QQ</p>
      </div>
      <div class="loginwechar">
        <van-icon class="flao" name="chat-o" size="40" />
        <p class="flao">微信</p>
      </div>
      <div class="logindivfla">
        <p class="loginspan">
          登录即代表您已同意
          <a href="#">知心购隐私政策</a>
        </p>
      </div>
    </div>
  </div>
</template>

<script>
import qs from 'qs'
import Vue from 'vue';
import { Notify } from 'vant';
import {mapMutations} from 'vuex'
export default {
  created(){
    this.getItem()
  },
  data() {
    return {
      flag: true,
      errorone: false,
      password: "",
      username: "",
      errortwo: false,
    };
  },
  methods: {
    ...mapMutations(['mapMutations']),
    ...mapMutations(['setToken']),
    showeyesone() {
      this.flag = !this.flag;
      if(this.flag==true){
        document.querySelector('#inputeyes').type='password'
      }else{
        document.querySelector('#inputeyes').type='text'
      }
    },
    chaItem(){
      console.log('sssss');
      document.querySelector('.inputone').innerHTML=''
      console.log( document.querySelector('.inputone').innerHTML);
      document.querySelector('.inputeyes').innerHTML=''
    },
    focususer() {
      this.errorone = true;
    },
    blurone() {
      this.errorone = false;
    },
    focuspassword() {
      this.errortwo = true;
    },
    blurtwo() {
      this.errortwo = false;
    },
    async loginItem() {
      const params={
        username:this.username,
        password:this.password
      }
      const dataItem=qs.stringify(params)
      const res = await this.$require({
        url: '/user/login',
        method: 'post',
        data:dataItem
      });
      if (res.status == 200) {
        // console.log(res);
        this.setToken({token:res.data.data.token})
        // console.log(this.setToken);
        // console.log(res.data.data.token);
        this.$router.push('/user');
      }else{
        Notify({ type: 'primary', message: '登陆失败' });
      }
    },
    //  ...mapMutations(['setuserinfo']),
    async getItem() {
       const res=await this.$require({
        url:'/user/info',
        method:'get'
      })
      if(res.status==200){
        // console.log('sss');
        this.list=res.data.data
        // console.log(this.list);
      //  this.setuserinfo({userinfo:this.list})
      }
    },
  },
};
</script>

<style  lang="scss" scoped>
// .ddddd{
//   width: 11px;
// }
.login-header {
  width: 350px;
  height: 48.61px;
  background-color: #f7f7f7;
  padding: 0 11px;
}
.login-imgesone {
  font-size: 27px;
  margin-top: 10px;
}
.login-headerspan {
  margin-left: 130px;
  color: #000000;
  font-size: 18.7px;
}
form {
  width: 100%;
  background-color: #ffffff;
  margin: 31px auto;
}

.login-formheader {
  line-height: 0px;
  margin: 0 20px;
  border-bottom: 1px solid #dcdcdc;
}
input {
  border: none;
  /* margin: 10 11px 0 0; */
  font-size: 18px;
  width: 190px;
  height: 40px;
  background-color: #fff;
}
.logineyesclose {
  padding: 10px 10px;
  font-size: 22px;
  opacity: 0.5;
  border-right: 1px solid #999999;
}
.loginforget {
  padding: 4px 5px 0;
  font-size: 16.5px;
  color: #000000;
}
.loginafter {
  width: 329px;
  color: #fff;
}
button {
  width: 359px;
  line-height: 45px;
  text-align: center;
  color: #fff;
  background-color: #f6351580;
  margin-left: 10px;
  border-radius: 25px;
  font-size: 17px;
}
.loginquick {
  width: 359px;
  height: 64px;
  padding: 22px 0;
}
.loginquick span {
  float: right;
  color: #999999;
  font-size: 15.5px;
}
.loginother {
  padding-left: 110px;
}

.loginother span {
  font-size: 15.5px;
  color: #dcdcdc;
}
.loginfal {
  width: 359px;
  line-height: 171px;
  // margin-left: 30px;
  padding: 22px 0;
  text-align: center;
}
.loginqq {
  height: 70px;
  float: left;
  margin-left: 50px;
}
.loginwechar {
  float: left;
}
.loginqq span {
  display: block;
  width: 100px;
}
.flao {
  display: block;
  width: 100px;
  line-height: 100%;
}
.logindivfla {
  width: 359px;
  height: 40px;
  margin-top: 100px;
  /* background-color: antiquewhite; */
}
.loginspan {
  line-height: 10px;
  color: #999999;
  text-align: center;
}
a {
  list-style: none;
  text-decoration: none;
  color: #409efe;
}
.cha {
  font-size: 20px;
  /* margin-left: 130px; */
  color: #999999;
}
.chatwo {
  font-size: 20px;
  color: #999999;
}
</style>